<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		

		<form class="layui-form" action="" lay-filter="example" id="myform">
			<div class="layui-form-item" style="margin-top: 5px;">
				<label class="layui-form-label">汽车编号</label>
				<div class="layui-input-block">
					<input type="text" name="carId" id="carId" disabled="disabled" style="width: 50%;" lay-verify="title" autocomplete="off" class="layui-input" value="">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">租车时间</label>
				<div class="layui-input-block">
				  <input type="text" autocomplete="off" class="layui-input" style="width: 50%;" id="test1">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">租车天数</label>
				<div class="layui-input-block">
				  <input type="text" name="lastDay" class="layui-input" disabled="disabled" style="width: 50%;" id="rentalDay" value="">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">租车费用</label>
				<div class="layui-input-block">
				  <input type="text" name="orderPrice" class="layui-input" disabled="disabled" style="width: 50%; display: inline-block" id="rentalPrice" value=""> 
				  <span style="display: inline-block; color: red;">*(已包含押金)每笔交易都将加上10000元押金</span>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">账户余额</label>
				<div class="layui-input-block">
				  <input type="text" name="productYear" id="myBalance" disabled="disabled" style="width: 50%;" class="layui-input" >
				</div>
			</div>
			<input type="hidden" id="tmpCarDailyPrice">
			



			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					<button type="submit" class="layui-btn" lay-submit="" disabled="disabled" style="cursor: not-allowed" id="clickRental" lay-filter="demo1">确定租车</button>
					<!-- <button type="button" id="LAY-component-form-getval">验证</button> -->
				</div>
			</div>
		</form>

		<script src="../layui/layui.js" charset="utf-8"></script>
		<!-- <script type="text/javascript" src="layui/js/jquery-1.8.3.min.js"></script> -->
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
		<script>
		
		  
		
		
		 
		
		</script>
		<script>
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer,
					$ = layui.jquery,
					layedit = layui.layedit,
					laydate = layui.laydate;

//子窗口
				//获得个人余额	
				$(document).ready(function(){
				var $ = layui.jquery;
				var value = localStorage.getItem("user");
				 var user = JSON.parse(value);
				 $.ajax({
					url: 'http://localhost:8085/userBalance/findBalance',
					data: {userId:user.userId},
					type:'GET',
					 dataType:"json",
					 timeout:300000,
					 success:function(result) {
						 // console.log(result.data);
					 		$('#myBalance').attr('value',result.data)
					 }
				 });
				
			});
    
		
		  //双控件
		  laydate.render({
		  		elem: '#test1' //指定元素
		  		// ,type: 'datetime'
		  		,trigger: 'click'
		  		//,lang: 'en'
		  		//,theme: 'grid'
		  		,range: true //开启日期范围，默认使用“-”分割
		  		//,min: '1949-10-1'
		  		//,max: '2021-5-9'
		  		//,value: '2021-05-09 12:06:09'
		  		//,value: '2021-05-08 - 2021-03-27'
		  		,done: function(value, date, endDate){
					// alert('aaaa')
		  		  // console.log('value'+value);
		  		   // console.log(endDate - date);
		  		   //起始时间
		  		   let first = value.substr(0,10);
		  		   let f1 = new Date(first);
		  		   //终止时间
		  		   let last = value.substr(13,13);
		  		   let l1 = new Date(last);
		  		   var day = l1.getTime() - f1.getTime();
				   
				   
				   
				   
				   
				   
				   
				   
		  		   var time = parseInt(day/(1000*60*60*24));
				   var dailyPrice = $('#tmpCarDailyPrice').val();
				   $('#rentalDay').attr('value',time);
				   $('#rentalPrice').attr('value',dailyPrice*time+10000)
				   if($('#rentalPrice').val()<$('#myBalance').val()) {
					    $('#clickRental').attr('style',null)
					   $('#clickRental').attr('disabled',false)
				   }else {
					   $('#clickRental').attr('disabled',true)
				   }
				   
				   // console.log();
				   
				   
				       // return d;
				       //在这里你可以写你的jquery $(function(){ })  // 等等操作
					   }

				   
		  
		  		
		  		// ,change: function(value, date, endDate){
		  		//   console.log(value, date, endDate);
		  		 
		  		// }
		  });
		  

				//自定义验证规则
				form.verify({
					title: function(value) {
						if (value.length < 1) {
							return '此栏不能为空噢';
						}
					}

				});


				//监听提交
				form.on('submit(demo1)', function(data) {
					var value = localStorage.getItem("user");
					 var user = JSON.parse(value);
					console.log(data);
					var carUserBillDTO = {
						carId: data.field.carId,
						userId: user.userId,
						orderPrice: data.field.orderPrice,
						lastDay: data.field.lastDay
					};
					console.log(carUserBillDTO);
					$.post({
						url: 'http://localhost:8085/carUserBill/rentalCar',
						data: JSON.stringify(carUserBillDTO),
						dataType: "json",
						timeout: 300000,
						contentType: 'application/json; charset=UTF-8',
						success: function(result) {
							if (result) {
								layer.msg("租车成功", {
									time: 1000
								}, function() {
									 var index = parent.layer.getFrameIndex(window.name)
									 parent.layer.close(index);
								});
							}
						}
					});
					return false;
				});



				//表单取值
				layui.$('#LAY-component-form-getval').on('click', function() {
					var data = form.val('example');
					// alert(JSON.stringify(data));
					console.log(data);
				});

			});
		</script>
		<style>
			.layui-input {
				width: 100%
			}
		</style>
	</body>
</html>
